<template>
	<view class="container">
		<view class="form">
			<div class="items">
				<p>请选择</p>
				<div class="r">
					<div class="radio">
						<view class="li" @tap="tabChange(0)" :class="formData.index==0?'active':''">
							省代
						</view>
						<view class="li" @tap="tabChange(1)"  :class="formData.index==1?'active':''">
							分销商
						</view>
					</div>
				</div>
			</div>
			<div class="items" v-show="formData.index==0">
				<p>商铺名称</p>
				<view class="r">

					<input type="text" placeholder="请输入商铺名称" />
				</view>
			</div>
			<div class="items"  v-show="formData.index==0">
				<p>营业执照</p>
				<view class="r">
					<uni-file-picker v-model="formData.fileList" file-mediatype="image" :limit="1"
						@select="handleSelect" />
				</view>
			</div>
			<div class="items">
				<p>联系人</p>
				<view class="r">
					<input type="text" placeholder="请输入联系人姓名" />
				</view>
			</div>
			<div class="items">
				<p>手机号码</p>
				<view class="r">
					<input type="text" placeholder="请输入手机号码" />
				</view>
			</div>
			<div class="items">
				<p>身份证</p>
				<view class="r">
					<input type="text" placeholder="请输入身份证号" />
				</view>
			</div>
			<div class="items">
				<p>微信账号</p>
				<view class="r">
					<input type="text" placeholder="请输入微信账号" />
				</view>
			</div>
			<div class="items">
				<p>支付宝账号</p>
				<view class="r">
					<input type="text" placeholder="请输入支付宝账号" />
				</view>
			</div>
			<div class="items">
				<p>银行卡账号</p>
				<view class="r">
					<input type="text" placeholder="请输入银行卡账号" />
				</view>
			</div>
			<view class="items">
				<view class="r">
					<button @tap="sub()">提交</button>
				</view>
			</view>
		</view>
		<view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				formData: {
					index:0,
					fileList: []
				}
			}
		},
		methods: {
			sub(){
				uni.showToast({
					title:'提交成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			},
			tabChange(index){
				this.formData.index = index
			},
			handleSelect(e) {
				// 微信小程序环境
				const tempFilePaths = e.tempFilePaths;
				console.log(tempFilePaths)
				return
				tempFilePaths.forEach(path => {
					uni.uploadFile({
						url: 'https://example.com/upload',
						filePath: path,
						name: 'file',
						header: {
							'Authorization': 'Bearer token'
						},
						success: (res) => {
							const data = JSON.parse(res.data);
							this.formData.fileList.push({
								name: data.filename,
								extname: data.ext,
								url: data.url
							});
						}
					});
				});
			}
		}
	}
</script>
<style lang="scss">
.container{
	box-sizing: border-box;
	padding: 20rpx;
}
.items{
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	p{
		font-size: 28rpx;
		width: 200rpx;
		text-align: right;
		padding-right: 20rpx;
		box-sizing: border-box;
	}
	.r{
		flex:1;
		width: 300rpx;
		display: flex;
		align-items: center;
		input{
			width: 100%;
			font-size: 28rpx;
			border: 1px solid #dedede;
			height: 60rpx;
			border-radius: 10rpx;
			padding-left: 10rpx;
		}
		button{
			color: #fff;
			background-color: #e74c3c;
			width: 300rpx;
			height:70rpx;
			line-height: 70rpx;
		}
		
	}
	.radio{
		display: flex;
		border: 1px solid #dedede;
		border-radius: 10rpx;
		overflow: hidden;
		.li{
			width: 150rpx;
			background-color: #fff;
			text-align: center;
			height: 50rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			&:nth-of-type(1){
				border-right: 1px solid #dedede;
			}
			&.active{
				color: #fff;
				background-color: #e74c3c;
			}
		}

	}
}
</style>